// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

import Utils from "./Utils";

const {ccclass, property} = cc._decorator;

/**
 * 块类预制体
 */
@ccclass
export default class Block extends cc.Component {

    xx: number
    yy: number

    blockPos: cc.Vec2

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.getPosArr()
        this.node.attr({
            xx: this.xx,
            yy: this.yy
        })

        // 手触摸时
        this.node.on(cc.Node.EventType.TOUCH_START, (event)=>{
            // 获得当前触摸的坐标
            // 此时坐标还位于标记为的0.5，0.5的距离,此时获得的数组下标位置基于0.5,0.5
            this.blockPos = this.node.getPosition()
        })

        // 手在屏幕上移动时
        this.node.on(cc.Node.EventType.TOUCH_MOVE, (event)=>{
            // 获取移动前到此次移动的坐标差值
            let diff = event.getDelta()

            if (this.node['blockType'] == '1_2' || this.node['blockType'] == '1_3') {
                // 触摸时的坐标+差值坐标=当前坐标
                this.blockPos = cc.v2(this.blockPos.x, this.blockPos.y + diff.y)
            }else if(this.node['blockType'] == '2_1' || this.node['blockType'] == '3_1'){
                // 触摸时的坐标+差值坐标=当前坐标
                this.blockPos = cc.v2(this.blockPos.x + diff.x, this.blockPos.y)
            }
            

         
            // 设置当前物体坐标
            this.node.setPosition(this.blockPos)
            // console.log('移动时：',this.blockPos.x,this.blockPos.y);
            
        })

        // 手在离开屏幕时
        this.node.on(cc.Node.EventType.TOUCH_END, (event)=>{
            // 得到新位置在数组中的下标位
            this.getPosArr()
            // 根据在数组中的下标位置,设置当前块在父容器中的位置
            this.setBlockPos()

            // 移动离开时获取新的数组下标位置
            this.node.attr({
                xx:this.xx,
                yy:this.yy
            })
        })
        // 手在物件外离开屏幕
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, (event)=>{
            // 得到新位置在数组中的下标位
            this.getPosArr()
            // 根据在数组中的下标位置,设置当前块在父容器中的位置
            this.setBlockPos()

            // 移动离开时获取新的数组下标位置
            this.node.attr({
                xx:this.xx,
                yy:this.yy
            })

        })
    }

     // 得到block块的二维坐标
     getPosArr(){
        let gameScene = window.vv.game
        // 获取当前物体坐标
        let pos = this.node.getPosition()
        // 转换为物体父级坐标
        let newPos = this.resetParentPos(pos)
        // 计算数组块中在数组中的下标位
        this.xx = Math.floor(newPos.x / (gameScene.rectGap + gameScene.rectWH))
        this.yy = Math.floor(newPos.y / (gameScene.rectGap + gameScene.rectWH))

        console.log(this.xx,this.yy);
        
        if (this.xx < 0) {
            this.xx = 0
        }
        if (this.yy < 0) {
            this.yy = 0
        }

        if (this.xx >= 4) {
            if (this.node['blockType'] == '3_1') {
                this.xx = 3
            }
            if (this.node['blockType'] == '2_1') {
                this.xx = 4
            }
        }

        if (this.yy >= 4) {
            console.log(this.node['blockType']);
            
            if (this.node['blockType'] == '1_3') {
                this.yy = 3
            }
            if (this.node['blockType'] == '1_2') {
                this.yy = 4
            }
        }
    }

    // 重置父级坐标的标记位
    resetParentPos(blockPos){
        // 获取游戏场景对象
        let gameScene = window.vv.game
        
        // 计算背景的长度
        // 背景长度一半 + 间隙长度
        var posBegin = cc.v2(gameScene.blockParent.width / 2 + gameScene.rectGap, gameScene.blockParent.height / 2 + gameScene.rectGap)

        // 得到需要停放的坐标
        // 注意：块的坐标是基于父级的0.5，0.5的坐标位摆放，所以 父级一半长度 + 块长度（有负值情况） = 新长度
        // 当块长度是负值时，那么父级一半的长度在0.5，0.5的坐标位时， 块长度就会往父级的0.5，0.5的左侧移动
        // 那么块元素就会摆放到新位置
        var posLeftBottom = cc.v2(posBegin.x + blockPos.x , posBegin.y + blockPos.y)

        // 被重置后的父级坐标,左下角位置
        return posLeftBottom
    }

    setBlockPos(){
        let gameScene = Utils.getMount('game')

        // 找到背景中心点
        let posBegin = cc.v2(gameScene.blockParent.width / 2, gameScene.blockParent.height / 2)

        // 数组坐标位置计算
        // 例如xx = 2，yy = 2
        // this.xx * (gameScene.rectWH + gameScene.rectGap)
        // 2 * （110 + 2） = 新位置坐标
        // 新位置坐标 - posBegin.x + gameScene.rectGap
        // 新位置坐标 - 背景中心点 + 间隔
        // 因为区块元素基于父元素0.5，0.5的位置摆放，所以新位置坐标可能小于中心点
        // 例如：220 - （330 + 2）= -112，此时因为0.5，0.5中心点位置，所以区块元素会向左侧摆放，此时位置正确
        let pos = cc.v2(
            this.xx * (gameScene.rectWH + gameScene.rectGap) - posBegin.x + gameScene.rectGap, 
            this.yy * (gameScene.rectWH + gameScene.rectGap) - posBegin.y + gameScene.rectGap
        )
        this.node.setPosition(pos)
    }

   

    start () {

    }

    // update (dt) {}
}
